<template>
	<view class="content">
		<view class="date" @click="DatePicker('date')">
			选择日期
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'"
			:end-text="'离店'" :show-seconds="true" @confirm="ed" @cancel="ed" />
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01', '2019/01/06'],
				rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
				type: 'rangetime',
				value: ''
			}
		},
		onLoad() {

		},
		methods: {
			DatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			}
		}
	}
</script>

<style>
	.date {
		text-align: center;
		padding: 10rpx 0;
		border: 1px solid #007AFF;
		width: 200rpx;
		margin: 50rpx auto;
	}
</style>
